<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>新增地址</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../default/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../default/css/index.css"/>
    <!--选择列表插件-->
    <link rel="stylesheet" type="text/css" href="../default/css/mui.picker.css"/>
    <link rel="stylesheet" type="text/css" href="../default/css/mui.poppicker.css"/>
    <style>
        body {
            background: #f2f2f2;
        }

        .mui-content {
            background: #f2f2f2;
        }

        .mui-bar-nav ~ .mui-content {
            padding-bottom: 50px;
        }

        .cash-withdrawal-btn {
            width: auto;
            min-width: 100px;
            vertical-align: inherit;
        }

        .mui-content {
            padding-bottom: 50px;
        }

        /*覆盖样式*/

        .foot-btn-box {
            border-radius: 0;
            width: 100%;
            background-color: #ffdb28;
            line-height: 30px;
            height: 40px;
        }

        .mui-input-group .mui-input-row label, .mui-input-group .mui-input-row input {
            font-size: 14px;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">新增地址</h1>
</header>

<div class="mui-content">
    <div>
        <div class="top-shadow"></div>
        <form class="mui-input-group" id="myForm">
            <input type="hidden" name="id">
            <div class="mui-input-row">
                <label>收件人</label>
                <input type="text" name="consigneeName" placeholder="收件人" id="consigneeName">
            </div>
            <div class="mui-input-row mui-radio">
                <label>男</label>
                <input name="consigneeGender" type="radio" value="男" id="radio1">
            </div>
            <div class="mui-input-row mui-radio">
                <label>女</label>
                <input name="consigneeGender" type="radio" checked value="1" id="radio2">
            </div>
            <div class="mui-input-row">
                <label>联系电话</label>
                <input type="text" placeholder="联系电话" name="consigneeTelephone" id="consigneeTelephone">
            </div>
            <div class="mui-input-row">
                <label>所在地区</label>
                <input type="text" placeholder="所在地区" name="addressName" readonly id='addressName'>
            </div>
            <div class="mui-input-row">
                <label>详细地址</label>
                <input type="text" name="detailedAddress" placeholder="街道，楼牌等" id="detailedAddress">
            </div>
        </form>
    </div>

    <div id='cityResult3' class="ui-alert"></div>

    <button type="button"
            class="mui-btn mui-btn-danger cash-withdrawal-btn foot-btn-box mui-icon mui-icon-plusempty add-address-sbuim">
        确认新增
    </button>
</div>


<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<!--选择组件-->
<script src="../default/js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/city.data-3.js" type="text/javascript" charset="utf-8"></script>

<!--<script src="../default/js/vconsole.js" type="text/javascript" charset="utf-8"></script>-->

<script>
    mui.init();


    mui("body").on('tap', '.add-address-sbuim', function () {
        var consigneeName = $("#consigneeName").val();
        var consigneeTelephone = $("#consigneeTelephone").val();
        var consigneeGender = $("input[type='radio']:checked").val();
        var addressName = $("#addressName").val();
        var detailedAddress = $("#detailedAddress").val();
        console.log(consigneeGender);
        if (consigneeName == '') {
            mui.toast('请输入收件人姓名');
            return false;
        } else if (consigneeTelephone == '') {
            mui.toast('请输入收件人手机号');
            return false;
        } else if (!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(consigneeTelephone))) {
            mui.toast('请输入正确的手机号')
            return false;
        } else if (addressName == '') {
            mui.toast('请选择地址')
            return false;
        } else if (detailedAddress == '') {
            mui.toast('请输入详细地址');
            return false;
        } else {
            // 用表单来初始化
            var formData = new FormData($('form')[0]);
            formData.append('userId', userId);
            console.log(formData);
            $.ajax({
                url: website + '/ReceivingAddressController/addReceivingAddress',
                type: 'post',
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    mui.toast('新增地址成功');
                    mui.openWindow({
                        url: 'address-list.html',
                    });
                }, error: function () {
                    mui.showLoading("发生错误,返回首页..", "div");
                    setTimeout(function () {
                        window.location.href = 'http://newst.whilte.com/index.html';
                    }, 1000)
                }
            });

        }

    });


    // 获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    }

    //获取url中的targetId参数
    var targetId = getUrlParam('targetId');
    console.log(targetId);
    if (targetId != null) {
        mui.showLoading("正在加载..", "div");
        $("input[name=id]").val(targetId);
        $(".mui-title").html("修改地址")
        $.ajax({
            url: website + '/ReceivingAddressController/findById',
            type: 'post',
            dataType: "json",
            data: {id: targetId},
            success: function (data) {
                console.log(data);
                $("#consigneeName").val(data.data.consigneeName);
                if (data.data.consigneeGender == '男') {
                    $("#radio1").attr("checked", "checked");
                    $("#radio2").removeAttr("checked");
                } else if (data.data.consigneeGender == '女') {
                    $("#radio2").attr("checked", "checked");
                    $("#radio1").removeAttr("checked");
                } else {
                    $("#radio1").attr("checked", "checked");
                    $("#radio2").removeAttr("checked");
                }
                $("#consigneeTelephone").val(data.data.consigneeTelephone);
                $("#addressName").val(data.data.addressName);
                $("#detailedAddress").val(data.data.detailedAddress);
                mui.hideLoading();
            }, error: function () {
                mui.showLoading("发生错误,返回首页..", "div");
                setTimeout(function () {
                    window.location.href = 'http://newst.whilte.com/index.html';
                }, 1000)
            }
        });
    }


    (function ($, doc) {
        $.init();
        $.ready(function () {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function (obj, param) {
                return obj[param] || '';
            };
            //-----------------------------------------
            //					//级联示例
            var cityPicker3 = new $.PopPicker({
                layer: 3
            });
            cityPicker3.setData(cityData3);
            var showCityPickerButton = doc.getElementById('addressName');
            var cityResult3 = doc.getElementById('addressName');
            showCityPickerButton.addEventListener('tap', function (event) {
                cityPicker3.show(function (items) {
                    cityResult3.value = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
        });
    })(mui, document);

</script>
</body>
</html>